<template>
  <div class="app-container">
    <!--        FIXME：bug-->
<!--    <el-form inline class="form-container">-->
<!--      <el-form-item class="form-item">-->
<!--        <el-date-picker-->
<!--            v-model="dateRange"-->
<!--            type="datetimerange"-->
<!--            :picker-options="pickerOptions"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            value-format="YYYY-MM-DD HH:mm:ss"-->
<!--            style="width: 350px;"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item class="form-item">-->
<!--        <el-input-->
<!--            v-model="queryParams.warContent"-->
<!--            placeholder="请输入监测内容"-->
<!--            clearable-->
<!--            @keyup.enter="handleQuery"-->
<!--            style="width: 200px;"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item class="form-item">-->
<!--        <el-switch v-model="queryParams.status"-->
<!--                   :active-value="1"-->
<!--                   :inactive-value="0"/>-->
<!--        <span style="color: #D3D3D3;">预警状态</span>-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="handleQuery">筛选</el-button>-->
<!--        <el-button id="reset-button" type="defaut" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->

<!--      <el-form-item style="margin-left: auto">-->
<!--        <el-button type="primary"  style="width: 8vw;" @click="viewDetails">查看详情</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-table
        ref="alarmlogRef"
        v-loading="loading"
        :data="alarmlogList"
        border
        @selection-change="handleSelectionChange"
        :default-sort="defaultSort"
        @sort-change="handleSortChange"
        style="width: 100%; border: 0 solid #ebeef5; color:#D3D3D3; padding:20px;"
        :header-cell-style="headerCellStyle"
        stripe
        max-height="62vh"
    >
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="监测内容" align="center" prop="warContent"/>
      <el-table-column label="监测目的" align="center" prop="purpose" :show-overflow-tooltip="true"/>
      <el-table-column label="测点编号" align="center" prop="sensNo"/>
      <el-table-column label="预警开始时间" align="center" prop="startTime" :show-overflow-tooltip="true"/>
      <el-table-column label="预警结束时间" align="center" prop="endTime" :show-overflow-tooltip="true"/>
      <el-table-column label="预警触发值" align="center" prop="earlyWarValue" :show-overflow-tooltip="true"/>
      <el-table-column label="预警阈值" align="center" prop="warningValue" :show-overflow-tooltip="true"/>
      <!--        FIXME:预警管理整体检修-->
<!--      <el-table-column label="预警状态" align="center" prop="confirm">-->
<!--        <template v-slot:default="scope">-->
<!--          <el-switch-->
<!--              v-model="scope.row.confirm"-->
<!--              :active-value="1"-->
<!--              :inactive-value="0"-->
<!--              @change="handleStatusChange(scope.row)"-->
<!--          />-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <el-form inline class="bottom-container">
<!--      <el-form-item>-->
<!--        <el-button style="background-color: #00008B;" @click="clearSelection">清除选择</el-button>-->
<!--      </el-form-item>-->

      <el-form-item class="pagination-container">
        <span>共{{ total }}条记录 第{{ pageSet.pageNum }}/{{ totalPages }}页</span>
        <el-button id="first" class="paging" type="primary" :disabled="pageSet.pageNum === 1" @click="goToFirstPage">首页</el-button>
        <el-button class="paging" type="primary" :disabled="pageSet.pageNum === 1" @click="goToPreviousPage">上一页</el-button>
        <el-button class="paging" type="primary" :disabled="pageSet.pageNum === totalPages" @click="goToNextPage">下一页</el-button>
        <el-button class="paging" type="primary" :disabled="pageSet.pageNum === totalPages" @click="goToLastPage">尾页</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import alarmPageAPI from "@/api/alarmPage";
// 设置 axios 的 baseURL
axios.defaults.baseURL = 'http://10.78.34.117:8888';
// axios.defaults.baseURL = 'http://localhost:8888';

export default {
  data() {
    return {
      queryParams: {
        warContent: null,
        status: 0,
      },
      dateRange: [],
      alarmlogList: [],
      total: 0,
      defaultSort: {
        prop: 'startTime',
        order: 'descending'
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(start.getDate() - 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 3);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      pageSet: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      selectedItems: []
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      this.alarmlogList = []; // 清空列表
      const { warContent, status } = this.queryParams;
      const [startTime, endTime] = this.dateRange;
      const {pageNum , pageSize} = this.pageSet;

      try {
        const response = await alarmPageAPI.getAlarmLogs({
          startTime: startTime ? startTime : null,
          endTime: endTime ? endTime : null,
          warContent: warContent ? warContent : null,
          status,
          pageNum: pageNum ? pageNum : 1,
          pageSize: pageSize ? pageSize : 10
        });


        this.alarmlogList = response.data.rows || [];
        this.total = response.data.total || 0;


      } catch (error) {
        console.error('获取数据失败:', error);
      } finally {
        this.loading = false;
      }
    },

    headerCellStyle({ columnIndex }) {
      return {
        borderLeft: columnIndex !== 0 ? '1px solid #ebeef5' : 'none',
        fontFamily: 'PingFang SC',
        fontSize: '14px',
        color: '#7B828E'
      };
    },
    handleQuery() {
      this.pageSet.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams.warContent = '';
      this.queryParams.status = null;
      this.dateRange = [];
      this.getList();
    },
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    },
    handleSortChange({ prop, order }) {
      this.defaultSort = { prop, order };
      this.getList();
    },
    clearSelection() {
      this.$refs.alarmlogRef.clearSelection();
    },
    goToPreviousPage() {
      if (this.pageSet.pageNum > 1) {
        this.pageSet.pageNum--;
        this.getList();
      }
    },
    goToFirstPage() {
      this.pageSet.pageNum = 1;
      this.getList();
    },
    goToNextPage() {
      if (this.pageSet.pageNum < this.totalPages) {
        this.pageSet.pageNum++;
        this.getList();
      }
    },
    goToLastPage() {
      this.pageSet.pageNum = this.totalPages;
      this.getList();
    },
    viewDetails() {
      if (this.selectedItems.length > 0) {
        // 将整个选中的行对象通过路由传递到详情页
        this.$router.push({
          path: '/details',
          query: {
            selectedItems: JSON.stringify(this.selectedItems)
          }
        });
      } else {
        this.$message.warning("请先选择一项记录");
      }
    },
    handleStatusChange(row){
      const id = row.sensNo;
      const confirmStatus = row.confirm;
      const confirmStartTime = row.startTime;

      this.updateConfirmStatus(id,confirmStatus,confirmStartTime);
    },

    async updateConfirmStatus(id, confirmStatus,confirmStartTime) {
      try {
        const response = await axios.post('/api/warning/updateConfirmStatus', null, {
          params: { id, confirmStatus, confirmStartTime}
        });

        if (response.data === "预警状态更新成功") {
          this.$message.success("预警状态更新成功");
          await this.getList();  // 刷新列表
        } else {
          this.$message.error("更新失败或未找到记录");
        }
      } catch (error) {
        console.error("更新预警状态失败:", error);
        this.$message.error("更新失败");
      }
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSet.pageSize);
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped lang="scss">

.app-container{
  padding: 20px;
}
.form-container {
  width: auto;
  display: flex;
  justify-content: space-between; /* Distributes space between child elements */

}

.form-item {
  border-right: 1px solid #ffffff;
  padding-right: 20px;
}
.bottom-container {
  display: flex;
  justify-content: space-between; /* Distributes space between child elements */
  margin-top: 20px;
}

/* 上传按钮样式 */
.el-button {
  @include button-style;
}
#reset-button {
  @include reset-style
}

.paging{
  background-color:  transparent;
  margin-left:0;
  border: 1px solid white;
}

//数据表背景色设置
:deep(.el-table th.el-table__cell ){
  background-color: #000C34
}
.el-table {
  --el-table-tr-bg-color:  #000C34;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
  background-color: #000C34;
  color: #FFF;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background:  #000C34;
}


.pagination-container {
  margin-left: auto; /* Pushes the element to the right */
}

//预警状态颜色设置
:deep(.el-switch__core) {
  background-color:  transparent;
}

:deep(.el-switch__core .el-switch__action){
  background-color: #7387c8;
}

/*日期筛选框背景*/
:deep(.el-input__wrapper) {
  background-color: transparent;

}

:deep(.el-date-editor .el-range-input) {
  color: white;
}

:deep(.el-date-editor .el-range-separator ) {
  color: rgb(189, 189, 189);
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  input {
    color: white;
  }
}

</style>
